import React,{useState,useRef} from 'react'
import styles from './index.module.less'
import { Avatar, Button } from 'antd-mobile'
import Icon from '@/components/Icons'
import Masonry from 'react-masonry-css'
import {breakpointColumnsObj} from '@/utils/constant'
import {ListCardInfo} from "@/types"
import { useStore } from '@/store'
import { useNavigate } from 'react-router-dom'
import CustomTabs from '@/components/CustomTabs'

import ListCard from '@/components/ListCard'
const MyPage = () => {
  const avatar = useStore(state => state.avatar)
  const navigate = useNavigate()
  const isLogin=true
  const [images, setImages] = useState([
    {
      id: 1
      ,info:{
        coverUrl: 'https://images.unsplash.com/photo-1532009324734-20a7a5813719?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
        title: '文章标题',
        author: '作者',
        avatar:avatar,
        hot: '11',
        isLike: false,
      }
    },
    {
      id: 2,
      info:{
        coverUrl: 'https://picsum.photos/200/300',
        title: '文章标题',
        author: '作者',
        avatar:avatar,
        hot: '11',
        isLike: false,
      }
    },{
      id: 2,
      info:{
        coverUrl: 'https://picsum.photos/200/300',
        title: '文章标题',
        author: '作者',
        avatar:avatar,
        hot: '11',
        isLike: false,
      }
    },{
      id: 2,
      info:{
        coverUrl: 'https://picsum.photos/200/300',
        title: '文章标题',
        author: '作者',
        avatar:avatar,
        hot: '11',
        isLike: false,
      }
    },{
      id: 2,
      info:{
        coverUrl: 'https://picsum.photos/200/300',
        title: '文章标题',
        author: '作者',
        avatar:avatar,
        hot: '11',
        isLike: false,
      }
    },{
      id: 2,
      info:{
        coverUrl: 'https://picsum.photos/200/300',
        title: '文章标题',
        author: '作者',
        avatar:avatar,
        hot: '11',
        isLike: false,
      }
    },{
      id: 2,
      info:{
        coverUrl: 'https://picsum.photos/200/300',
        title: '文章标题',
        author: '作者',
        avatar:avatar,
        hot: '11',
        isLike: false,
      }
    },
  ])
  const onGoTodetail =(info:ListCardInfo)=> {
    console.log('onGoTodetail',info)
  }
  const onGoLogin =()=> {
    navigate('/login')
  }
  const onLickClick =(info:ListCardInfo,index:number):void=> {
    console.log('onLickClick',info)
    let newImages = [...images]
    newImages[index].info.isLike = !newImages[index].info.isLike
    setImages(newImages)
  }
  //#region tab切换
  const [activeTab, setActiveTab] = useState('0') // 初始选中的标签
  const tabs = [
    { key: '0', value: '笔记' },
    {
      key: '1',
      value: '收藏'
    },
    {
      key: '2',
      value: '点赞'
    }
  ] // 标签列表，根据需要进行扩展
  const handleTabChange = (tab: any) => {
    setActiveTab(tab.key)
    console.log('tab', tab) // 处理标签切换事件
  }
  const itemRefs = useRef<HTMLDivElement[]>([])
  const moveBlockRef = useRef<HTMLDivElement>(null)

  //#endregion tab切换
  //登录之后显示的页面
const loginPage=()=>{
  return (
    <div className={styles.myPage}>
      <div className={styles.userCard}>
        <Avatar
          style={{ '--border-radius': '50%', '--size': '72px' }}
          src={avatar}
        />
        <div className={styles.userInfo}>
          <div className={styles.userName}>&nbsp</div>
          <div className={styles.userNumber}>
            <span>小红薯号:</span>
            <span>123456789</span>
          </div>
        </div>
      </div>
      <div className={styles.sexBar}>
      <div className={styles.sexBox}>
        {/* <Icon iconName='icon-nvxingxingbie' /> */}
        <Icon iconName='icon-nanxingxingbie' />
      </div>
      </div>
      <div className={styles.userBanner}>
        <div className={styles.countBox}>
          <div className={styles.countItem}>
            <span>100</span>
            <span>关注</span>
          </div>
          <div className={styles.countItem}>
            <span>100</span>
            <span>粉丝</span>
          </div>
          <div className={styles.countItem}>
            <span>100</span>
            <span>获赞与收藏</span>
          </div>
        </div>
        <div className={styles.button}>
          <Button block shape='rounded' color='danger' size='small'>
            关注
          </Button>
        </div>
      </div>
      <CustomTabs
        activeTab={activeTab}
        tabs={tabs}
        handleTabChange={tab => handleTabChange(tab)}
      />
      <div className={styles.content}>
      <Masonry breakpointCols={breakpointColumnsObj} className='myMasonryGrid' columnClassName='myMasonryGridColumn'>
        {images.map((item, index) => {
          console.log(item.id)
          return (
            <ListCard
              key={index}
              info={item.info}
              cardClick={(info) => onGoTodetail(info)}
              likeClick={(info) => onLickClick(info,index)}
            />
          )
        })}
      </Masonry>
      </div>
    </div>
  )
}
//未登录显示的页面
const unLoginPage=()=>{
  return (
    <div className={styles.unLoginPage}>
      <div className={styles.tips}>
      还没有登录哦，<span onClick={()=>{
        onGoLogin()
      }}>去登录</span>
      </div>
     
    </div>
  )
}
  return (
    isLogin? loginPage() : unLoginPage()
  )
}
export default MyPage
